<template>
  <page-header-wrapper>
    <page-tab-list>
    </page-tab-list>
    <a-card :bordered="false">
      <a-table
        :rowKey="
          (r, i) => {
            return r.id
          }
        "
        :pagination="{
          total: this.totalCount,
          showSizeChanger: false,
          onChange: this.tablePageChange,
        }"
        :columns="columns"
        :data-source="list"
        :scroll="{ x: 'max-content' }"
      >
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getCashFlow } from '@/api/purchase/stbz'
import tabList from '@/views/saas/components/tabList.vue'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 80
  },
  {
    title: '类型',
    dataIndex: 'direction',
    scopedSlots: {
      customRender: 'direction'
    },
    width: 280
  },
  {
    title: '金额',
    dataIndex: 'money',
    width: 280
  },
  {
    title: '交易类型',
    dataIndex: 'type',
    scopedSlots: {
      customRender: 'type'
    }
  },
  {
    title: '支付前金额',
    dataIndex: 'balance_before',
    width: 280
  },
  {
    title: '支付后金额',
    dataIndex: 'balance_after',
    width: 280
  },
  {
    title: '时间',
    dataIndex: 'update_time',
    scopedSlots: {
      customRender: 'update_time'
    }
  }
]

export default {
  components: {
    tabList
  },
  data () {
    return {
      columns,
      queryParam: {
        page: 1
      },
      list: [],
      total: 0
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取数据
    async getList () {
      const hide = this.$message.loading('加载中...', 1000)
      const res = await getCashFlow(this.queryParam)
      hide()
      if (res.code == 0) {
        this.list = res.data.list
        this.totalCount = res.data.total
      }
    },
    tablePageChange (e) {
      this.queryParam.page = e
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>

</style>
